<template>
	<div>
		<Row>
<!-- 			<Space size="large" wrap :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
				 <Col :span="24">  
			       <DatePicker type="date" :start-date="new Date(2000, 1, 1)" placeholder="Select date" style="width:100%" />
				 </Col>  
				 <Col :span="24">  
			       <DatePicker type="daterange" :start-date="new Date(2050, 1, 1)" placement="bottom-end" placeholder="Select date" style="width:100%" />
				    </Col> 
			</Space> -->
		</Row>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
			<Input style="width:100%" v-model="searchKey" placeholder="请输入教练姓名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div v-if="this.tableInfo.data.length > 0">
			<div class="mt-1">
					  <Row>
					    <Col class="p-1" v-for="(row, index) in tableInfo.data"  :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
					      <div class="text-xs rounded shadow p-1 bg-black-80 text-fuguang">
					        <div class="p-2 text-fuguang bg-black-80 d-flex justify-content-start text-lg">
							  <span>{{row.jlname}}</span>
					        </div>
							<div class="p-2 d-flex justify-content-end text-fuguang text-xss">
								<div class="text-fuguang text-center">{{row.tqjlid}}</div>
							</div>
							<div class="p-2 d-flex justify-content-end text-fuguang text-xss">
							<div class="text-fuguang text-center  text-xss">{{row.ct}}</div>
							</div>
							<div class="p-2 position-relative  d-flex justify-content-between align-items-center">
								<div class="w-25  position-relative">
									<div class="padding-top-100"></div>
									<div class="position-absolute rounded-circle overflow-hidden top0">
										<img class="w-100 h-100" :src="row.cover"/>
									</div>
									<div class="text-fuguang text-center"></div>
								</div>
								
								<div class="w-75 text-danhong ">
									<div class="p-1 d-flex justify-content-end">
			<!-- 							<span>实际金额</span> -->
										<span class="text-danhong text-blod text-sm">¥{{row.sjje}}</span>
									</div>
									<div class="p-2 d-flex justify-content-end align-items-center">
										<span class="text-danhong text-blod ml-1">
											<span v-if="row.zt == 'R'">已提取</span>
											<span v-if="row.zt == 'F'">已到账</span>
										</span>
									</div>
								</div>
							</div>
							
							
			
					        <div class="p-1 d-flex justify-content-end">
					          <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.tqjlid)">详细</Button>
					
					        </div>
					      </div>
					    </Col>
					  </Row>
					</div>
		</div>
		<div v-else class="d-flex justify-content-center p-1">
			暂无数据
		</div>
		
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.size" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: "",
				tableInfo: {
					current: 1,
					size: 10,
					total: 0,
					columnInfo: [
						{
							title: "提取记录ID",
							key: "tqjlid",
						},
						{
							title: "教练名称",
							key: "jlname",
						},
						{
							title: "实际金额",
							key: "sjje",
						},
						{
							title: "提取状态",
							slot: "zt",
						},
						{
							title: "提取时间",
							key: "ct",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.current = 0;
				this.search();
			},
			show: function(tqjlid) {
				this.$router.push({
					path: "/jltkjl/detail",
					query: {
						tqjlid: tqjlid
					}
				})
			},
			searchs: function() {
				this.tableInfo.current = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/jl/jltkjl/page",
					param: {
						// 传一个当前页
						searchKey: this.searchKey,
						current: this.tableInfo.current,
						size: this.tableInfo.size
					}
				}).then(data => {
					console.log("jltq");
					console.log(data);
					this.tableInfo.data = data.records;
					this.tableInfo.current = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.size = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.current = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>